<template>
  <div class="about">
    <h1>登陆页面</h1>
    <el-form
      :model="ruleForm"
      status-icon
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号" prop="username">
        <el-input
          type="text"
          v-model="ruleForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="text">
        <el-input v-model="ruleForm.text"></el-input>
        <div style="width: 60px" v-html="codeOpt.svg"></div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">
          登陆
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        text: '',
        codeId: '',
      },
      codeOpt: {
        codeId: '',
        svg: '',
      },
    }
  },
  created() {
    this.getCodeText()
  },
  methods: {
    // 验证码接口
    async getCodeText() {
      // 拿到svg图片进行渲染
      const res = await axios.get('http://localhost:3000/users/loginCode')
      console.log('data:', res.data.data)
      this.codeOpt.codeId = res.data.data.insertId
      this.codeOpt.svg = res.data.data.data
    },
    async postLogin(data) {
      const res = await axios.post('http://localhost:3000/users/login', data)
      console.log('data:', res.data)
    },
    // 登陆接口
    submitForm() {
      console.log({ ...this.ruleForm, codeId: this.codeOpt.codeId }, 'ruleForm')
      this.postLogin({ ...this.ruleForm, codeId: this.codeOpt.codeId })
    },
  },
}
</script>
